<template>
  <div class="event-configuration">
    <div class="event-button">
      <je-button size="small" type="text" @click="handlerEvent">{{
        type == 'base' ? '全局事件' : '节点事件'
      }}</je-button>
    </div>
    <div v-for="(item, index) in eventData" :key="index" class="event-context">
      {{ index + 1 + '.  ' + item.typeName }}
    </div>
    <AddEventModal
      ref="addEvent"
      :type="type"
      :custom-event-listeners="eventData"
      :work-flow-info="workFlowInfo"
      :func-fields="funcFields"
      @changeData="changeData"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch, onMounted } from 'vue';
  import { Button, Hooks, Modal } from '@jecloud/ui';
  import AddEventModal from './modal/add-event.vue';
  import { getData } from '@/api/index';
  import { cloneDeep, encode, isEmpty } from '@jecloud/utils';

  export default defineComponent({
    name: 'EventConfiguration',
    components: {
      JeButton: Button,
      AddEventModal,
    },
    props: {
      type: {
        type: String,
        default: '',
      },
      customEventListeners: {
        type: Array,
        default: () => {
          return [];
        },
      },
      workFlowInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props, context) {
      const addEvent = ref(null);
      const eventData = Hooks.useModelValue({ props, context, key: 'customEventListeners' });
      // const eventData = ref(props.customEventlisteners);
      // watch(
      //   () => eventData.value,
      //   () => {
      //     emit('update:customEventlisteners', eventData.value);
      //   },
      // );
      //点击全局事件按钮
      const handlerEvent = () => {
        addEvent.value.visibleModule = true;
      };

      //给列表赋值
      const changeData = (data) => {
        eventData.value = data;
      };
      onMounted(() => {
        getFieldDatas();
      });

      //选择的功能发生变化需要刷新列表数据
      watch(
        () => props.workFlowInfo.funcId,
        () => {
          getFieldDatas();
        },
      );

      const funcFields = ref([]);
      //获得功能的字段信息
      const getFieldDatas = () => {
        const funcId = props.workFlowInfo.funcId;
        //如果funcId为空就不执行
        if (isEmpty(funcId)) {
          funcFields.value = [];
          return false;
        }
        const params = {
          tableCode: 'JE_CORE_RESOURCEFIELD',
          j_query: encode({
            custom: [
              {
                code: 'RESOURCEFIELD_FUNCINFO_ID',
                type: '=',
                value: funcId,
                cn: 'and',
              },
              {
                code: 'RESOURCEFIELD_XTYPE',
                type: 'notIn',
                value: ['child', 'fieldset'],
                cn: 'and',
              },
            ],
            order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }],
          }),
          limit: '-1',
        };
        getData(params, { pd: 'meta' })
          .then((data) => {
            funcFields.value = cloneDeep(data.rows);
          })
          .catch((e) => {
            Modal.alert(e.message, 'error');
          });
      };

      return { eventData, addEvent, handlerEvent, changeData, funcFields };
    },
  });
</script>

<style lang="less" scoped>
  .event-configuration {
    .event-button {
      height: 32px;
      line-height: 32px;
      padding-left: 5px;
    }
    .event-context {
      height: 32px;
      line-height: 32px;
      border-top: 1px solid #e6e6e6;
      padding-left: 8px;
    }
  }
</style>
